<script setup lang="ts">
import { useRequest } from 'vue-request'
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchMedicalAdviceDetailAPI } from '@/apis/fetchMedicalAdviceDetail'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()

const id = ref('')

const { data, loading, refresh } = useRequest(
  () => fetchMedicalAdviceDetailAPI({ id: id.value }, userInfoStore.userInfo!.token).then(res => res.data?.data),
  { manual: true },
)

onLoad((options) => {
  if (!options?.id)
    return
  id.value = options.id
  refresh()
})
</script>

<template>
  <view class="absolute left-0 top-0 h-screen w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
  <view class="relative">
    <Spacer height="52" />
    <view class="rounded-20rpx bg-white p-40rpx">
      <view class="text-28rpx text-#848484 leading-40rpx">
        <MpHtml :content="data?.content" />
      </view>
    </view>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'medicalAdviceDetail'
style:
  navigationBarTitleText: '医嘱信息'
</route>
